<%@ page language="java" contentType="text/html; charset=UTF8" pageEncoding="UTF8"%>
<%@page import="db.mysql.mySqlUtils"%>
<%
request.setCharacterEncoding("utf8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<script src="/Goomi/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="/Goomi/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/Goomi/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/Goomi/js/jquery-ui-1.8.15.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/Goomi/css/jquery-ui-1.8.15.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/Goomi/css/ui.jqgrid.css" />
<title>Setting</title>
<script type="text/javascript"><!--
var data;
var tab = 'goods';
var kindValue = ":";
function getGoods(){
	try{
		//alert(1);
		var url = "/Goomi/Ajax.template?class=goomi.goods.goodsService&method=getGoods&para=" + "1" ;
		$.getJSON(url, 
			function(json){
				data = json;
				getKind();
		});
	}catch(e){
		alert(e);
	}
}

var childData;
function getChild(){
	try{
		//alert(1);
		var url = "Ajax.template?class=goomi.member.memberService&method=getChild&constructor=HttpServletRequest&para=<%=session.getAttribute("id")%>" ;
		$.getJSON(url, 
			function(json){
				childData = json;
				loadChildGrid();
		});
	}catch(e){
		alert(e);
	}
}

function getKind(){
	try{
		//alert(1);
		var url = "/Goomi/Ajax.template?class=goomi.goods.goodsService&method=getKind&para=" + "all" ;
		$.getJSON(url, 
			function(json){
			$(json).each(function(i,item){
				kindValue += ";" + item.db_id + ":" + item.kind;
			});
			loadGrid();
		});
	}catch(e){
		alert(e);
	}
}


function deleteId(id){
	try{
		//alert(1);
		var url = "/Goomi/Ajax.template?action=edit&oper=delete&table=" + tab + "&id=" + id ;
		$.getJSON(url, 
			function(json){
//OK
		});
	}catch(e){
		alert(e);
	}
}

//id name description kind_id create_date line_flag fire_flag cust_flag
var lastSelect;
function loadGrid(){
    jQuery("#dataGrid").jqGrid({
      datatype: "local",
      height: 500,
      colNames:['db_id','picture_id','商品名稱', '產品介紹', '類別','圖片','試衣'],
      colModel:[
		//{name:'id',index:'id', width:60, sorttype:"int",hidden:false},
        {name:'db_id',index:'db_id', width:60, sorttype:"int",editable:true,hidden:true},
        {name:'picture_id',index:'db_id', width:60, sorttype:"int",editable:true,hidden:true},
        {name:'name',index:'name', width:90,editable:true},
        {name:'description',index:'description', width:100,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
        {name:'kind_id',index:'kind_id', width:100,editable:true,edittype:"select",editoptions:{value:kindValue}},
        {name:'pic',index:'pic', width:100,editable:false},
        {name:'fit',index:'fit', width:100,editable:false},
        
      ],
      rowNum:10,
     	rowList:[10,20,30],
      //multiselect: true,
      onSelectRow: function(id){
  		if(id && id !== lastSelect){
  			//if(lastSelect){
  			//	jQuery("#dataGrid").jqGrid('saveRow',lastSelect, checksave);
  			//}
  			//jQuery('#dataGrid').jqGrid('restoreRow',lastSelect);
  			//jQuery('#dataGrid').jqGrid('editRow',id,true);
  			$('#showImg').attr('src', "/Goomi/Download.template?type=img&id=" + jQuery("#dataGrid").getLocalRow(id).picture_id);
  			$('#showImg').show();
  			lastSelect=id;
  		}
  	},
	gridComplete: function(){
		var ids = jQuery("#dataGrid").jqGrid('getDataIDs');
		for(var i=0;i < ids.length;i++){
			var cl = ids[i];
			//up = "<input style='height:22px;width:20px;' type='button' value='U' onclick=\"uploadPic('" + jQuery("#dataGrid").getLocalRow(cl).db_id + "');\"  />"; 
			img = "<img width=50 height=50 id='img" + jQuery("#dataGrid").getLocalRow(cl).db_id + "' src=\"/Goomi/Download.template?type=img&id=" + jQuery("#dataGrid").getLocalRow(cl).picture_id + "\"/>" + jQuery("#dataGrid").getLocalRow(cl).picture_id; 
			but = "<button id=but" + jQuery("#dataGrid").getLocalRow(cl).db_id + " name=fitBut item_id=" + jQuery("#dataGrid").getLocalRow(cl).db_id + ">加入試衣</button>"
			jQuery("#dataGrid").jqGrid('setRowData',ids[i],{pic:img});
			jQuery("#dataGrid").jqGrid('setRowData',ids[i],{fit:but});
		}	// jQuery("#dataGrid").getLocalRow(ids[i]).picture_id 
		
		$('[name=fitBut]').button().click(function(){
			addFit($(this).attr("item_id"));
		});
	},
  	editurl: "/Goomi/Ajax.template?action=edit&table=" + tab,
      caption: "童裝最前線"
    });  // jqGrid
 
    for(var i=0;i <= data.length;i++)
      jQuery("#dataGrid").jqGrid('addRowData',i+1,data[i]);
}

function checksave(result) {
	if (result.responseText=="") {alert("Update is missing!"); return false;}
	return true;
}

$(document).ready(function() {
	getGoods();
	$('#showImg').hide();
	jQuery("#dataGrid").jqGrid('saveRow',lastSelect, checksave);
});

function addFit(id){
	<% if(session.getAttribute("id") == null) {%>
		alert("請先登入");
	<% } else { %>
	var url = "/Goomi/Ajax.template?action=edit&oper=add&table=fit_info&id=_empty&member_id=<%=session.getAttribute("id")%>&goods_id=" + id ;
	$.getJSON(url, 
		function(json){
		alert("完成");
	});
	<% } %>
}
</script>
</head>
<body>
<table width="100%">
<tr><td>
<table id="dataGrid"><tbody></tbody></table>
</td>
<td>
<img id=showImg src=""/>
</td>
</tr></table>
  
</body>
</html>
 